<template>
	<view class="merchant-services-wrap">
		<view class="touxiang" @click="!form.loginname?tabAsx('/pages/login/login'):''">
			<img class="touxiang_img" src="@/static/imge/touxiang.svg" alt="" />
			<view class="touxiang_1">
				<view class="touxiang_1x">
					您好，用户
				</view>
				<view class="touxiang_1y" v-if="form.loginname">
					{{maskPhoneNumber(form.loginname)}}
				</view>
				<view class="touxiang_1z" v-else>
					立即登录
				</view>
			</view>
		</view>
		<scroll-view class="waitsScroll" scroll-y="true">
			<view class="" style="height: 25upx;">

			</view>
			<view class="mytab" v-for="(item,index) in formdataB" :key="index" v-show="item.showA">
				<view class="mytab_title" v-if="item.show">
					{{item.title}}
				</view>
				<view class="mytab_text" :class="item.flex?'mytab_textflex':''">
					<view class="mytab-1" v-for="(ites, ind) in item.list" :key="ind">
						<view v-if="ites.url !='2'&&ites.show" class="mytab-1xx" :style="{borderBottom: ites.boder||''}"
							@click="ites.url==1?PhoneCall():tabAsx(ites.url)">
							<view class="iconfontAs" v-if="!item.flex">
								<img v-if="ites.icon=='lianxifangshi'" src="@/static/imge/lianxifangshi.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" />
								<img v-if="ites.icon=='guanyu-'" src="@/static/imge/guanyu-.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" />
								<img v-if="ites.icon=='saoma'" src="@/static/imge/saoma.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" />
								<img v-if="ites.icon=='xiugaimima'" src="@/static/imge/xiugaimima.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" />
								<!-- 	<img v-if="ites.icon=='huodongyanpiao'" src="@/static/imge/huodongyanpiao.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" /> -->
							</view>
							<view class="iconfontAs" :style="{background: ites.background}" v-if="item.flex">
								<text class="iconfont" :style="{fontSize: ites.size+'rpx',color:ites.color}"
									:class="ites.icon"></text>
							</view>
							<view class="mytab-1x">
								{{ites.name }}
							</view>
							<view class="mytab-1y" v-if="ites.name == '电话热线'">

							</view>
							<view class="iconfont iconxiaojiantou" v-if="!item.flex">
							</view>
						</view>
						<button v-if="ites.url =='2'&&ites.show" type="default" hover-class='none' open-type="contact"
							class="mytab-1xx">
							<view class="iconfontAs">
								<img v-if="ites.icon=='kefu'" src="@/static/imge/kefu.svg"
									:style="{width: ites.size+'rpx',height:ites.size+'rpx'}" alt="" />
							</view>
							<view class="mytab-1x"
								style="font-weight: 500;background-image: linear-gradient(to bottom, #363432, #363432);-webkit-background-clip: text;color: transparent;">
								{{ ites.name }}
							</view>
							<view class="iconfont iconxiaojiantou">
							</view>
						</button>
					</view>

				</view>

			</view>
			<view class="mytab" v-if="form.loginname">
				<view class="mytab_text">
					<view class="mytab-1" @click="loginOut()">
						<view class="mytab-1xx" :style="{borderBottom: 'none'}">
							<view class="iconfontAs">
								<img src="@/static/imge/tuichu.svg" :style="{width: '48rpx',height:'48rpx'}" alt="" />
							</view>
							<view class="mytab-1x">
								退出登录
							</view>
							<view class="iconfont iconxiaojiantou">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height:5upx;">

			</view>
		</scroll-view>
		<uv-popup ref="popup" @change="change" mode="bottom" :safeAreaInsetBottom="false" :round="15">
			<view class="boda">
				<view class="boda1">
					是否拨打电话?
				</view>
				<view class="boda2" @click="PhoneCallsx('13822617973')">
					13822617973
				</view>
				<view class="boda3" @click="PhoneCallsx('13760061917')">
					13760061917
				</view>
				<view class="boda4" @click="quxiao">
					取消
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				form: {},
				formdataB: [{
					title: "通用",
					show: true,
					showA: true,
					flex: true,
					list: [{
						url: "/pagesB/order/order",
						icon: "icon5",
						background: '#fdf4da',
						color: '#f3c352',
						name: "订单",
						msg: 0,
						size: 48,
						show: true,
						boder: 'none'
					}, {
						url: "/pagesA/passenger/passenger?id=1",
						icon: "iconicon_chengcheren",
						name: "乘车人",
						background: '#e6f4fe',
						color: '#4374eb',
						msg: 0,
						size: 50,
						show: true,
						boder: 'none'
					}, {
						url: "/pagesB/MyNeeds/MyNeeds",
						icon: "iconriqi",
						background: '#fcecec',
						color: '#ed6d78',
						name: "行程",
						msg: 0,
						size: 50,
						show: true,
						boder: 'none'
					}],
				}, {
					title: "司机",
					show: true,
					flex: false,
					showA: false,
					list: [{
							url: "/pagesB/DriverScanningCode/DriverScanningCode",
							icon: "saoma",
							name: "扫码验票",
							msg: 0,
							size: 42,
							show: true,
						},
						// {
						// 	url: "/pagesB/SpecialInspection/SpecialInspection",
						// 	icon: "huodongyanpiao",
						// 	name: "特检验票",
						// 	msg: 0,
						// 	size:42,
						// 	show: true,
						// },
					],
				}, {
					title: "关于",
					show: true,
					flex: false,
					showA: true,
					list: [{
							url: "2",
							icon: "kefu",
							name: "在线客服",
							msg: 0,
							size: 44,
							show: true,
						}, {
							url: "1",
							icon: "lianxifangshi",
							name: "电话热线",
							msg: 0,
							size: 42,
							show: true,
						},
						{
							url: "/pagesB/ResetPassWords/ResetPassWords?id=2",
							icon: "xiugaimima",
							name: "修改密码",
							msg: 0,
							size: 40,
							show: true,
						},
						{
							url: "/pagesB/AboutUs/AboutUs",
							icon: "guanyu-",
							name: "关于我们",
							msg: 0,
							size: 44,
							boder: 'none',
							show: true,
						}
					],
				}]
			}
		},
		onLoad(options) {
			if (options.id) {
				uni.navigateTo({
					url: '/pagesB/order/order',
					success: function(res) {
						console.log('跳转成功');
						options.id = ''
						// 这里可以放置一些简单的操作，但通常不推荐这样做，因为页面还未完全加载完成。
					},
				})
			}
		},
		onReady() {

		},
		onShow() {
			if (uni.getStorageSync('userJson')) {
				var data = uni.getStorageSync('userJson')
				this.form = JSON.parse(data)
				for (var i = 0; i < this.formdataB.length; i++) {
					if (this.formdataB[i].title == '司机') {
						if (this.form.userType == 2) {
							this.formdataB[i].showA = true
						}
					}
				}
			} else {
				this.form = {}
			}
		},
		methods: {
			...mapMutations(['publicPost']),
			quxiao() {
				this.$refs.popup.close();
			},
			change() {

			},
			loginOut() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确定退出登录~',
					confirmText: '确定', // 自定义确定按钮的文字
					cancelText: '取消', // 自定义取消按钮的文字
					success: (res) => {
						if (res.confirm) {
							for (var i = 0; i < this.formdataB.length; i++) {
								if (this.formdataB[i].title == '司机') {
									this.formdataB[i].showA = false
								}
							}
							uni.removeStorageSync('userJson')
							uni.removeStorageSync('token')
							uni.removeStorageSync('userId')
							that.form = {}
						} else if (res.cancel) {

						}
					}
				});
			},
			maskPhoneNumber(phone) {
				if (phone) {
					return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
				}
			},
			tabAsx(e) {
				if (uni.getStorageSync('userJson')) {
					uni.navigateTo({
						url: e
					})
				} else {
					if (e == "/pages/login/login") {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (e == "/pagesB/AboutUs/AboutUs") {
						uni.navigateTo({
							url: e
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '亲，此操作需要去登录～',
							confirmText: '确定', // 自定义确定按钮的文字
							cancelText: '取消', // 自定义取消按钮的文字
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {

								}
							}
						});
					}

				}

			},
			PhoneCall() {
				this.$refs.popup.open();
			},
			PhoneCallsx(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success: (res) => {},
					fail: (res) => {
						console.log("调用失败!");
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boda {
		background-color: #f5f5f5;
		font-size: 28upx;

		.boda1 {
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
		}

		.boda2 {
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 2upx;
		}

		.boda3 {
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 2upx;
		}

		.boda4 {
			height: 100upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12upx;
			color: #4374eb;
		}
	}

	.merchant-services-wrap {
		background-color: #f7f7f7;
		height: 100vh;
		overflow: hidden;
	}

	.waitsScroll {
		height: calc(100vh - 150rpx);
	}

	.touxiang {
		display: flex;
		align-items: center;
		padding: 0 25upx;
		padding-bottom: 30upx;
		padding-top: 30upx;
		background-color: #fff;
		border-bottom-left-radius: 30upx;
		border-bottom-right-radius: 30upx;

		.touxiang_img {
			width: 100upx;
			height: 100upx;
			margin-right: 20upx;
			position: relative;
		}

		.touxiang_1 {
			.touxiang_1x {
				font-size: 26upx;
				color: #666;
				font-weight: 500;
				margin-left: 10upx;
			}

			.touxiang_1y {
				font-size: 36upx;
				color: #333;
			}

			.touxiang_1z {
				font-size: 30upx;
				color: #333;
				margin-left: 10upx;
				font-weight: 500;
			}
		}


	}

	.mytab {
		margin: 0 25upx;

		.mytab_title {
			font-size: 24upx;
			padding: 0 25upx;
			color: #666;
			padding-bottom: 10upx;
		}

		.mytab_text {
			background-color: #fff;
			border-radius: 16upx;
			margin-bottom: 25upx;
			padding: 0 25upx;

			.mytab-1 {
				.mytab-1xx {
					display: flex;
					align-items: center;
					height: 100upx;
					border-bottom: 2upx solid #f7f7f7;

					.iconfontAs {
						flex: none;
						width: 60upx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 5upx;
					}

					.mytab-1x {
						font-size: 28upx;
						flex: 1;
						text-align: left;
						color: #444;
						font-weight: 500;
					}

					.mytab-1y {
						display: flex;
						align-items: center;
						font-size: 26upx;
						color: #363432;
					}

					.iconxiaojiantou {
						font-size: 30upx;
						margin: 0;
						margin-left: 10upx;
						color: #999;
					}
				}

				button {
					margin: 0;
					padding: 0;
					border: none;
					background-color: transparent;
					/* 其他你想要重置的样式 */
					font-size: 28upx;
					font-weight: 500;
					box-shadow: none;
					height: normal;
					line-height: normal;
					color: #666;
					text-align: left;
				}

				button::after {
					border: none !important;
				}
			}

		}

		.mytab_textflex {
			display: flex;
			align-items: center;
			height: 200upx;
			justify-content: center;

			.mytab-1 {
				flex: 1;

				.mytab-1xx {
					display: flex;
					align-items: center;
					flex-direction: column;
					border-bottom: none;
					height: auto;
					justify-content: center;

					.iconfontAs {
						flex: none;
						height: 80upx !important;
						width: 80upx;
						display: flex;
						align-items: center;
						border-radius: 20upx;
						margin-bottom: 10upx;
						justify-content: center;
						margin-right: 0;
					}

					.mytab-1x {
						font-size: 28upx;
						flex: 1;
						text-align: center;
						color: #444;
					}

					.iconxiaojiantou {
						font-size: 30upx;
						margin: 0;
						margin-left: 10upx;
						color: #999;
					}
				}
			}
		}

	}

	.uv-safe-bottom {
		padding-bottom: 0 !important;
	}
</style>